<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<title> 登陆页面 </title>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link href="../Common/css/ufun.css" rel="stylesheet" />
		<script src="../Common/js/tools.js"></script>
		<style type="text/css">
			html {
				overflow-x: hidden;
				overflow-y: hidden;
			}
			
			#bgc{
				width: 100%;
				height: 100%;
				z-index: -1;
				position: fixed;
				top: 0;
			}

			/*以下为背景装饰*/
			.middle-image {
				margin: 20vw auto 0 auto;
				text-align: center;
			}

			#Girl {
				width: 50vw;
			}


			.circle-x {
				background: var(--color-yellow);
				position: fixed;
				overflow: hidden;
			}

			/*以下为内容区域，包括所有文字性内容*/
			.main-title {
				position: relative;
				margin: 10vw auto 10vw auto;
				text-align: center;
			}

			.Circle {
				width: 2vw;
				height: 2vw;
				background: var(--color-yellow);
				-moz-border-radius: 16vw;
				-webkit-border-radius: 16vw;
				border-radius: 16vw;
				margin: 2.88vw;
			}

			.main-title ul {
				list-style: none;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
			}

			.main-title a {
				color: var(--color-yellow);
				text-align: center;
				font-size: 6vw;
			}

			.text-box {
				align-items: center;
				text-align: center;
				border-bottom: 0.24vw solid var(--color-gray-light);
				display: flex;
				width: 80%;
				margin: 6vw auto 0 auto;
			}

			.text-box input {
				border-style: none;
				outline: none;
				background: none;
				font-size: 4vw;
				color: var(--color-gray-dark);
				margin: 2.5vw 2.5vw;
				float: left;

			}

			#Password::-webkit-input-placeholder {
				color: var(--color-gray-light);
			}

			#TelCnt::-webkit-input-placeholder {
				color: var(--color-gray-light);
			}

			i {
				color: var(--color-gray-light);
			}

			.set-btn {
				width: 80%;
				height: 10vw;
				background: var(--color-yellow);
				border-radius: 9.6vw;
				border-style: none;
				color: #4b4a48;
				font-size: 4vw;
				margin: 4vw auto;
			}

			.set-btn-container {
				margin: 2.9vh auto 0vh auto;
				text-align: center;
			}

			.noaccount {
				border: 0.24vw solid red;
				width: 80%;
				margin: 2.4vw auto 0vh auto;
				display: flex;
				text-align: center;
			}

			.link-area {
				display: block;
				margin-top: 6vw;
				text-align: center;
				align-items: center;
			}

			.link-area a {
				color: var(--color-gray-light);
				font-size: 4vw;
				font-weight: 200;
				text-decoration: none;
			}

			.line-spliter {
				color: var(--color-yellow);
				padding: 0vh 2vw;
			}

			#Logo {
				text-align: center;
				margin: 12vw auto;
			}

			#Logo img {
				width: 12vw;
			}
		</style>
	</head>
	<body>
		<img src="img/login-background.png" id="bgc">
		<div class="middle-image">
			<img src="img/pic-logo.svg" id="Girl">
		</div>
		<div class="main-title">
			<ul>
				<div id="Ufun">
					<li><a>Ufun</a></li>
				</div>
				<div id="Circle1" class="Circle"></div>
				<div id="Discover">
					<li><a>发现校内的牛人</a></li>
				</div>
			</ul>
		</div>

		<div class="text-box">
			<i class="material-icons">account_circle</i>
			<input id="TelCnt" type="tel" class="mui-input-clear mui-input" placeholder="手机号" maxlength="11">
		</div>

		<div class="text-box">
			<i class="material-icons">lock</i>
			<input id="Password" type="password" class="mui-input-clear mui-input" placeholder="密码">
		</div>


		<form method="get" name="next" onsubmit="Login();return false;" class="set-btn-container">
			<button type="submit" class="set-btn">登陆</button>
		</form>

		<div class="mui-content-padded">
			<div class="link-area">
				<a id="Reg" href="register.html">注册账号</a>
				<span class="line-spliter">|</span>
				<a id="ForgetPassword" href="#">忘记密码</a>
			</div>
		</div>

		<div id="Logo">
			<img src="img/logo.png">
			<div id="Animation">
				<span></span>
				<span></span>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
		var originalWidth=document.documentElement.clientWidth ||document.body.clientWidth;
		var bgc = document.getElementById("bgc");
		bgc.style.width = originalWidth + "px";
		bgc.style.height = originalHeight + "px";
		let current;
		document.addEventListener('plusready', function() {
			GetStatusTop();
			current = plus.webview.currentWebview();
			DoShow(current);
		});

		function Login() {
			var tel = document.getElementById("TelCnt").value;
			var password = document.getElementById("Password").value;
			if (tel == "23464") {
				var tel = "15698578933";
				var password = "369991";
			}

			if (tel == null || tel == "" || tel.length < 11) {
				alert("手机号有误");
				return;
			} else if (password == null || password == "") {
				alert("密码不能为空");
				return;
			}

			CallAJAX("doLogin", JSON.stringify({
				"phoneNo": tel,
				"pswd": password
			}), function(data) {
				if (data["res"] == "1")
					alert("账户未找到");
				else if (data["res"] == "2")
					alert("密码错误");
				else {
					plus.storage.setItem("userHash", data["userHash"]);
					location.replace('welcome-page.html');
				}
			});
		}
	</script>
</html>
